﻿<!DOCTYPE html>
<html>
<head>
<title>Simple Animation</title>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="WP7Bridge.js" ></script>
<script type="text/javascript">
    //holds the drawing context of the canvas element
    var context;
    //loads the bounce sound for the ball
    var sound;

    //size of canvas
    var width = 800;
    var height = 800;

    //position of the ball
    var x = 400;
    var y = 40;

    //speed of the ball, initially 0
    var dx = 0;
    var dy = 0;

    //ball radius
    var ballRadius = 35;

    function init() {
        context = document.getElementById("playCanvas").getContext("2d");

        sound = new Audio("107785__hans__tink.mp3");
        sound.load();
        playSound(0); //this avoids lag the first time

        //keep calling draw function after every 20 milliseconds
        setInterval(draw, 20);
    }

    //store old values to know if there's a real change
    var oldx, oldy;

    function draw() {
        //change the position by delta
        x += dx;
        y += dy;

        //have some small friction
        dx *= 0.95;
        dy *= 0.95;

        var xcol = false;
        var ycol = false;

        //collision detection and bounce
        if (x + ballRadius > width) {
            dx = -dx/2.0;
            x = width - ballRadius;
            xcol = true;
        } else if (x < ballRadius) {
            dx = -dx/2.0;
            x = ballRadius;
            xcol = true;
        }
        if (y + ballRadius > height) {
            dy = -dy / 2.0;
            y = height - ballRadius;
            ycol = true;
        } else if (y < ballRadius) {
            dy = -dy / 2.0;
            y = ballRadius;
            ycol = true;
        }

        if (xcol && x != oldx && Math.abs(dx) > 1) {
            playSound(Math.min(1, 0.75 + (Math.abs(dx) * 0.05)));
        }
        else if (ycol && y != oldy && Math.abs(dy) > 1) {
            playSound(Math.min(1, 0.75 + (Math.abs(dy) * 0.05)));
        }

        //store old values for comparing and perform click
        oldx = x;
        oldy = y;

        //clears everything
        clear();
        //draws external rectangle
        rectangle(0, 0, width, height);
        //draws the ball at its current position
        circle(x, y, ballRadius);
    }

    //draws the circle with center location at x,y
    function circle(x, y, radius) {
        context.fillStyle = "#444444";
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, true);
        context.closePath();
        context.fill();
    }

    //draws a rectangle with width(w) & height(h) with top left corner at (x,y) 
    function rectangle(x, y, w, h) {
        context.fillStyle = "#000000";
        context.lineWidth = "4";
        context.strokeRect(x, y, w, h);
    }

    //clears the whole canvas
    function clear() {
        context.clearRect(0, 0, width, height);
    }

    function motionChanged(event) {
       //change delta increment by gravity
       dx += event.accelerationIncludingGravity.x/10.0;
       dy += -event.accelerationIncludingGravity.y/10.0;
   }

   function playSound(volume) {
       sound.volume = volume;
       sound.play();
   }

   window.addEventListener("load", init, true);
   window.addEventListener("devicemotion", motionChanged, true);
</script>
</head>
<body>
<header>Hello HTML5</header>
<div id="wrapper">
	<canvas id="playCanvas" width="800" height="800" >
        
    </canvas>
</div>
</body>
</html>